<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <table border="1" width="80%">
        <tr>
            <th WIDTH="20%">姓名</th>
            <td width="40%"><input v-model="name" placeholder="姓名必须是2-6位汉字" @blur="checkName"/></td>
            <td v-if="name_color_flag" style="color: red">{{name_check_result}}</td>
            <td v-else style="color: green">{{name_check_result}}</td>
        </tr>
        <tr>
            <th>密码</th>
            <td><input type="password" v-model="password" placeholder="密码必须是6-10位" @blur="checkPassword"/></td>
            <td v-html="password_check_result"></td>
        </tr>
        <tr>
            <th>确认密码</th>
            <td><input type="password" v-model="password_repir" @blur="checkPasswordRepir"/></td>
            <td v-html="password_repir_check_result"></td>
        </tr>
    </table>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                name: '',
                name_check_result: '',
                name_color_flag: false,
                password: '',
                password_check_result: '',
                password_repir: '',
                password_repir_check_result: '',
            }
        },
        methods: {
            checkName() {
                // 1. 获取到文本框的内容
                let name = this.name
                // 2. 书写姓名的正则表达式
                let regex_name = /^[\u4e00-\u9fa5]{2,6}$/
                // 3. 判断姓名是否符合正则表达式
                if (regex_name.test(name)) {
                    this.name_check_result = '姓名可以使用'
                    this.name_color_flag = false
                } else {
                    this.name_check_result = '姓名必须是2-6位汉字'
                    this.name_color_flag = true
                }
            },
            checkPassword() {
                let password = this.password
                let regex_password = /^.{6,10}$/
                if (regex_password.test(password)) {
                    this.password_check_result = '<span style="color: green">密码可以使用</span>'
                } else {
                    this.password_check_result = '<span style="color: red">密码必须是6-10位</span>'
                }
                let password_repir = this.password_repir
                if (password === password_repir) {
                    this.password_repir_check_result = '<span style="color: green">两次密码一致</span>'
                } else {
                    this.password_repir_check_result = '<span style="color: red">两次密码不一致</span>'
                }
            },
            checkPasswordRepir() {
                let password = this.password
                let password_repir = this.password_repir
                if (password === password_repir) {
                    this.password_repir_check_result = '<span style="color: green">两次密码一致</span>'
                } else {
                    this.password_repir_check_result = '<span style="color: red">两次密码不一致</span>'
                }
            }
        }
    })
</script>
